<template>
  <div id="admin">
    <el-card class="box-card">
        <el-form ref="form" label-width="80px" :inline="true">
      <el-form-item label="账号">
        <el-input v-model="userName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="query" icon="el-icon-search" style="margin-right:20px">
          查询
          </el-button>
      </el-form-item>
      <el-form-item>
            <el-button type="primary" @click="download" id="download">下载列表</el-button>
          </el-form-item>
    </el-form>
    </el-card>
    <el-card class="box-card content">
      <el-table :data="tableData" style="width: 100%">
      <el-table-column label="账号" min-width="20%">
        <template slot-scope="scope">
          <i class="el-icon-service"></i>
          <span style="margin-left: 10px">{{ scope.row.userId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户名" min-width="20%">
        <template slot-scope="scope">
          <i class="el-icon-service"></i>
          <span style="margin-left: 10px">{{ scope.row.userName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="二维码总数" min-width="20%">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.qrNum }}</span>
        </template>
      </el-table-column>

      <el-table-column label="已处理" min-width="20%">
        <template slot-scope="scope">
          <i class="el-icon-circle-check-outline"></i>
          <span style="margin-left: 10px">{{ scope.row.dealed }}</span>
        </template>
      </el-table-column>

      <el-table-column label="未处理" min-width="20%">
        <template slot-scope="scope">
          <i class="el-icon-warning"></i>
          <span style="margin-left: 10px">{{ scope.row.undealed }}</span>
        </template>
      </el-table-column>

      <el-table-column label="成功笔数" min-width="20%">
        <template slot-scope="scope">
          <i class="el-icon-success"></i>
          <span style="margin-left: 10px">{{ scope.row.succNum }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="失败原因" min-width="20%">
        <template slot-scope="scope">
          <i class="el-icon-error"></i>
          <span style="margin-left: 10px">{{ scope.row.failedNum }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" min-width="10%">
        <template slot-scope="scope">
          <router-link :to="'/admin/detail/'+scope.row.userName">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">查看详情</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    </el-card>
    
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 25, 50, 100]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>





<script>
import { queryList } from "../api/api";
export default {
  data() {
    return {
      lastLogin: "",
      lastIP: "",
      userName: "",
      stDate: "",
      ovDate: "",
      total: 100,
      tableData: [],
      currentPage: 1
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleSizeChange(val) {
      //分页
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    query() {
      let obj = {
        username: this.userName
      };
      queryList(obj).then(data => {
        //console.log(data);
        this.tableData = [];
        let jsonArray = data.data.list;
        if (!jsonArray) return;
        let loadingInstance = this.$loading({
          target: "#admin",
          text: "拼命加载中........"
        });
        setTimeout(() => {
          this.$nextTick(() => {
            // 以服务的方式调用的 Loading 需要异步关闭
            loadingInstance.close();
          });
          this.total = jsonArray.length;
          for (let json of jsonArray) {
            let newJson = {};
            newJson.userId = json["matchingUserid"];
            newJson.userName = json["username"];
            newJson["qrNum"] = json["allCount"];
            newJson["dealed"] = json["processedCount"];
            newJson["undealed"] = json["untreatedCount"];
            newJson["succNum"] = json["successCount"];
            newJson["failedNum"] = json["failCount"];
            this.tableData.push(newJson);
          }
        }, 1000);
      });
    },
    download(){
        let url = "http://192.168.1.136:8080/down/userList";
        window.open(url);
    }
  },
  created() {
  }
};
</script>




<style lang="less" scoped>
.el-col-2 {
  text-align: center;
}
.el-pagination {
  text-align: right;
}
#admin{
  margin-top: 30px;
}
.content{
  margin: 30px 0;
}
</style>

